<template>
	<view class="content">
		<u-navbar :is-back="false" :background="background" title-color="#ffffff"  :immersive="true"   titleWidth="350">
			<view class="menu">
				<!-- <i class="icon iconfont icon-caidanzhankai" @tap.stop="shownavs"></i> -->
				<image src="/static//index/menu.png" mode="widthFix" lazy-load @tap.stop="shownavs"></image>
			</view>
			<view class="menu-right" slot="right">
				{{address_l || '-'}}
			</view>
		</u-navbar>
		<!-- <u-popup :show="showNav" @close="close" 
		 :round="10" mode="top" 
		 :safeAreaInsetBottom="true" 
		>12321 -->
		<u-popup v-model="showNav" mode="left"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
			<view class="nav-conte">
				<view class="nav-log">
					<image src="/static/menu/logo.png" mode="widthFix" lazy-load></image>
				</view>
				
				<view class="nav-address">
					{{address_l || '-'}}
				</view>
				<!-- <view class="nav-item">MOBI</view> -->
				<view class="nav-item active" hover-class="hover-transform1" @tap.stop="clickBullentin">
					<view class="nav-item-l ">
						<image src="../../static/menu/ce-0-1.png" mode="widthFix"></image>首页
					</view>
					<i class="icon iconfont icon-xiayibu"></i>
					</view>
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(5)">
				<view class="nav-item-l">	
					<image src="../../static/menu/ce-2.png" mode="widthFix"></image>生态</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(24)">
				<view class="nav-item-l">	
					<image src="../../static/menu/ce-1.png" mode="widthFix"></image>抢单</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					
					
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(6)">
					<view class="nav-item-l">	
						<image src="../../static/menu/ce-3.png" mode="widthFix"></image>兑换</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
						
						
						<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(4)">
						<view class="nav-item-l">	
							<image src="../../static/menu/ce-4.png" mode="widthFix"></image>团队</view>
							<i class="icon iconfont icon-xiayibu"></i></view>
						
						
					
			<!-- 	<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(2)"><view class="nav-item-l"><image src="../../static/yuqishouyi.png" mode="widthFix"></image>CFD收益</view>
					<i class="icon iconfont icon-xiayibu"></i></view> -->
				
				<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(1)"><view class="nav-item-l"><image src="../../static/menu/ce-5.png" mode="widthFix"></image>我的</view>
					<i class="icon iconfont icon-xiayibu"></i></view>
					
					<view class="nav-item" hover-class="hover-transform1" @tap.stop="getQz(89)"><view class="nav-item-l"><image src="../../static/menu/ce-6.png" mode="widthFix"></image>公告</view>
						<i class="icon iconfont icon-xiayibu"></i></view>
			</view>
		</u-popup>
		<view class="banner">
			<u-swiper :list="bannerList" mode="rect"  bg-color="transparent"></u-swiper>
		</view>
		<!-- <view class="bulletin">
			<swiper circular="true" vertical="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, index) in noticeList.slice(0,5)" :key="index" @touchmove.stop>
					<view class="swiper-item" @tap.stop="clickBullentin(item)">
						<view class="swiper-item-c">
							{{item.title}}
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="nav-index-content">
			<block v-for="(item,index) in navList" :key="index">
				<view class="nav-item-i" hover-class="hover-transform1" @tap.stop="chooseUrl(item.url)">
					<image :src="item.image" mode="widthFix"></image>
					<text>{{item.text}}</text>
				</view>
			</block>
			
		</view>
		
		<view class="index-card">
			<view class="index-card-title">
				<view class="index-card-title-l">
					<image src="../../static/index/index-t.png" mode=""></image>
					
					
				</view>
				<text>流通数值</text>
			</view>
			<view class="index-card-cont-ccccc">
				<image src="../../static/index/Pattern-bg.png" mode=""></image>
				<view class="index-card-cont">
					<view class="index-card-cont-i">
						<text>代币发行量</text>
						<view>{{indexInfo.totalSupply || 0}}</view>
					</view>
					<view class="index-card-cont-i">
						<text>代币价格</text>
						<view>{{indexInfo.lastPrice || 0}}</view>
					</view>
					<view class="index-card-cont-i">
						<text>动态流通量</text>
						<view>{{indexInfo.circulatingSupply || 0}}</view>
					</view>
					<!-- <view class="index-card-cont-i">
						<text>FOMO奖池</text>
						<view>{{indexInfo.fomo || 0}}</view>
					</view> -->
				</view>
			</view>
			
			<!-- <view class="index-card-btn">
				<button hover-class="othe-class" @tap.stop="coinbt">提现</button>
			</view> -->
		</view>
		
		
		
		<view class="index-address-bg">
			<view class="index-address index-address-other">
				<view class="index-address-content">
					<view class="index-address-content-t">
						我的地址:
					</view>
					<!-- <text>{{address || '-'}}</text> -->
					
					<view class="index-address-content-r">
						<view>{{address || '-'}}</view>
						<button @tap.stop="copy(address)">复制</button>
					</view>
				</view>
			</view>
		<!-- 	<view class="index-address">
				<view class="index-address-content">
					<view class="index-address-content-t">
						CFD地址:
					</view>
					<view class="index-address-content-r">
						<view>{{address_ || '-'}}</view>
						<button @tap.stop="copy(address_)">复制</button>
					</view>
					
				</view>
			</view> -->
		</view>
		<view class="index-address-bg">
			<view class="index-address">
				<view class="index-address-content">
					<view class="index-address-content-t">
						我的推广链接
					</view>
					<view class="index-address-content-r">
						<view>{{yqurl || '-'}}</view>
						<button @tap.stop="copy(yqurl)">复制</button>
					</view>
					
				</view>
			</view>
		</view>
		
		<view class="index-address-bg">
			<view class="about-title">
				关于我们
			</view>
			<view class="about-content">
				<view class="">
					Crowd Funding DAO(简称:CFDAO)以泰山众筹为生态雏形(2018年至今已稳定运行多年)采用四进一出
				</view>
				<view class="">
				重生机制的独特亮点，真正做到科学消除泡沫.以及合理止损.彻底解决泡沫无法消除的行业痛点。</view>
				<view class="">
				投资者本金安全有保障，致力于打造安全长久的风险投资理财平台。</view>
				 <view class="">
				投资有风险！请理性投资理财！</view>
			</view>
		</view>
		<view class="bottom-content">
			@2022 CFDAO. 版权所有
		</view>
		<!-- <view class="index-tip">
			<view class="index-tip-content">
				<view class="">
					我的等级:
				</view>
				<text>{{indexInfo.lv || 0}}</text>
			</view>
			
		</view>
		
		<view class="income-content">
			<view class="income-content-l">
				<view class="charts-box">
				<qiun-data-charts
					type="pie"
					:chartData="chartData"
					:loadingType="0"
					:echartsH5="false"
					:disableScroll="true"
					background="none"
					:animation="false"
					:tooltipShow="true"
					:title="''"
					:subtitle="''"
					:dataLabel="false"
					:tapLegend="false"
				  />
				  </view>
				
			</view>
			
			<view class="income-conten-r">
				<block v-for="(item,index) in clist" :key="index">
				<view class="income-conten-r-l">
					{{item.title}}
				</view>	
				</block>
				
				
			</view>
		</view>	
		 -->
		
		

	
		
		
		<u-popup v-model="showPopule" mode="center"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
		 <scroll-view scroll-y="false">
			<view class="popu-buy">
				<view class="popu-buy-ti">
					提现
				</view>
				<view class="popu-buy-content">
					<view class="popule-item">
						<input type="number" v-model="number" maxlength="24" placeholder="数量">
					</view>
				</view>
				<view class="popu-buy-b">
					<button @tap.stop="showPopule=false">取消</button>
					<button hover-class="hover-transform1" @tap.stop="buyBut">确定</button>
				</view>
			</view>
			</scroll-view>
		</u-popup>
		
		<u-popup v-model="showPopule1" mode="center"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
		 <view class="popule-loading">
			 <u-loadmore
			     :status="status"
				  bgColor="#000000"
			     :loading-text="loadingText" 
			     :loadmore-text="loadmoreText" 
			     :nomore-text="nomoreText" 
			 />
			 
		 </view>
		
		</u-popup>
		<u-top-tips ref="message" :type="types"  zIndex="999" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		
		
		<u-popup v-model="showPopuleAver" mode="center"
		 :safeAreaInsetBottom="true" :mask-close-able="true">
		 <scroll-view scroll-y="false">
			<view class="popu-buy popu-buy-other">
				<view class="popule-close" @tap.stop="showPopuleAver=false">
					<image src="../../static/cha.png" mode="widthFix" lazy-load></image>
				</view>
				<view class="popu-buy-ti">
					请先绑定上级
				</view>
				<view class="popu-buy-content">
					<view class="popule-item">
						<input type="text" v-model="refer"  placeholder="请输入上级地址">
					</view>
				</view>
				<view class="popu-buy-b popu-buy-b-other">
					<!-- <button @tap.stop="showPopuleAver=false">取消</button> -->
					<button hover-class="hover-transform1" @tap.stop="buyRefer">确定</button>
				</view>
			</view>
			</scroll-view>
		</u-popup>
		
	</view>
</template>

<script>
	import qiunDataCharts from '@/components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	
	import {
		pageto,
		showToast,
		fetch,
		updownLine,
		forceUpdate,
		diff_txt,
		_updataTabBar
	} from '@/common/js/util.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import md5 from "../../common/md5.js";
	import clipboard from "@/common/js_sdk/dc-clipboard/clipboard.js"
	export default {
		components:{
			qiunDataCharts
		},
		data() {
			return {
				refer:'',
				showPopuleAver:false,
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				types:'',
				showPopule1:false,
				number:'',
				showPopule:false,
				title: 'Hello',
				background:'#21242D',
				bannerList:[],
				showIndex0:false,
				showIndex1:false,
				showNav:false,
				indexInfo:{},
				noticeList:[],
				address:'',
				status: 'loading',
				loadingText: 'trying to load',
				loadmoreText: 'Pull up gently',
				nomoreText: 'really no more',
				password:'',
				isBind:false,
				invitation:'',
				chartData:{},
				clist:[],
				meta:'',
				address_:'',
				navList:[],
				yqurl:'',
				address_l:'',
				exchange_url:'',
				grab_url:''
			}
		},
		onLoad(e) {
		if(e.refer){
			// console.log(e);
			// this.isHaveInvited = true;
			this.invitation =e.refer
		}
		},
		computed:{
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLangType',//
				'getLogin',
				'getLoginInfo',
				'getTextArr',//,
				'getUserList',
				'getIsBind'
			])
		},
		onShow(){
			console.log(111);
			this.handleUserAuth()
			this.navList = [
				{text:'生态',image:require('../../static/index/index-1.png'),url:'/pages/wealth-treasure/wealth-treasure'},
				{text:'抢单',image:require('../../static/index/index-0.png'),url:'GrabTheOrder'},
				
				// {text:'国库',image:require('../../static/index/index-2.png'),url:''},
				{text:'团队',image:require('../../static/index/index-3.png'),url:'/pages/team/team'},
				// {text:'Swap',image:require('../../static/index/index-4.png'),url:''},
				// {text:'生态',image:require('../../static/index/index-5.png'),url:''},
				{text:'绑定',image:require('../../static/index/index-6.png'),url:'bind'},
				// {text:'更多',image:require('../../static/index/index-7.png'),url:''}
			]
			this.isBind = false;
			this.showPopuleAver =false
			
			this.showPopule = false;
			this.getWalletList()
			this.showNav=false
			this.getBanner()
			this.getSomeUrl()
			// this.getNotice()
		},
		methods: {
			async getSomeUrl(){
				await fetch('/api/Pledge/jumpUrl', '', "post").then(res=>{
					this.showLoad = false;
					if(res.data.code){
						
						if(res.data.code==1){
							// this.getUser()
							this.exchange_url = res.data.data.exchange_url
							this.grab_url = res.data.data.grab_url
						}
						
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			},
			chooseUrl(url){
				if(url){
					if(url=='bind'){
						if(this.getIsBind){
							
							this.showTips(this.getLangType=='en'?' 已绑定':'已绑定','error')
							return
						}
						this.showPopuleAver=true
					}else if(url=='GrabTheOrder'){
						///////抢单跳转
						this.getQz(24)
					}else{
						uni.reLaunch({
							url:url
						})
					}
				}
			},
			copy(data){
				let _this = this
				uni.hideToast();
				// #ifdef APP-PLUS
				clipboard.setText(data);
				_this.showTips(_this.getLangType=='en'?' 复制成功':'复制成功','success')
				// showToast(_this.getLangType=='en'?' copy success':'复制成功')
				// #endif
				// #ifdef MP-WEIXIN || H5
				uni.setClipboardData({
					data: data,
					success: function () {
						uni.hideToast();
						_this.showTips(_this.getLangType=='en'?' 复制成功':'复制成功','success')
						// showToast(_this.getLangType=='en'?' copy success':'复制成功')
					}
				});
				// #endif
			},
			async getRefer(){
				
				await fetch('/api/user/referBind',{address:this.address,refer:this.invitation},'post').then(res=>{
					if(res.data.code==1){
						this.getUser()
						this.showTips(res.data.msg,'success')
					}else{
						this.showTips(res.data.msg,'error')
					}
					
				})
			},
			phoneNumShow (info) {
				// let that = this;
				let number = info; //获取到手机号码字段
				let mphone = number.substring(0, 4) + '****' + number.substring(info.length-5,info.length);
				// that.tel = mphone
				return mphone
			},
			...mapMutations([
				'setLoginInfo'
			]),
			shownavs(){
				// console.log('q3eq2',this.showNav);
				this.showNav =true
			},
			// 授权
			async handleUserAuth(){
				
			try{
					const userAddress = await ethereum.request({ method: 'eth_requestAccounts' });
					// console.log(this.handleBalanceTap());
					console.log(userAddress,'userAddress');
					//调用者的钱包地址
					this.address = userAddress[0]
					// this.address = '0x485e8a92b7ddbbe3d8b21382afe78408366d05d0'
				let str = 	((this.address.split("").reverse().join("")).substring(0,6)).split("").reverse().join("")
				this.password = md5.hex_md5(str)
					this.getUser()
					
					// // console.log('userAddress',userAddress)	
				}catch(err){
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				}
			},
			...mapMutations(['setBulletin','setIsBind']),
			getWalletList(){
				
				fetch('/api/index/index',{},'post').then(res=>{
					if(res.data.code){
						if(res.data.code==1){
							this.yqurl = res.data.data.yqurl
							this.indexInfo = res.data.data.market_list
						}
					}
					
				})
			},
			async buyBut(){
				this.showPopule = false;
				this.showPopule1 = true;
				
				await fetch('/api/wallet/transfer',{address:this.address,number:this.number},'post').then(res=>{
					this.showPopule1 = false;
					this.number=''
					this.showTips(res.data.msg,'error')
					if(res.data.code==1){
						
						this.refer='';
						this.showPopuleAver=false;
						this.showPopule1=false;
						this.number='';
						this.showPopule=false;
						this.bannerList=[];
						this.showIndex0=false;
						this.showIndex1=false;
						this.showNav=false;
						this.bannerList=[];
						this.indexInfo={};
						this.noticeList=[];
						this.address='';
						this.password='';
						this.isBind=false;
						this.invitation='';
						this.chartData={};
						this.clist=[]
						
						
						
						
						
						this.getUser()
						this.showTips(res.data.msg,'success')
						// this.indexInfo = res.data.data
					}
				})
			},
			async buyRefer(){
				this.showPopule = false;
				// this.showPopule1 = true;
				
				await fetch('/api/user/referBind',{address:this.address,refer:this.refer},'post').then(res=>{
					this.showPopuleAver = false;
					this.refer=''
					this.showTips(res.data.msg,'error')
					if(res.data.code==1){
						this.getUser()
						this.getWalletList()
						this.showTips(res.data.msg,'success')
						// this.indexInfo = res.data.data
					}else if(res.data.code==0){
						setTimeout(()=>{
							this.showPopuleAver = true;
						},1000)
					}
				})
			},
			showTips(msg,type) {
				// <!-- type值可选的有primary(默认)、success、info、warning、error -->
				this.$refs.message.type=type
				this.$refs.message.show({
					title: msg
				});
			},
			clickBullentin() {
				
				return
				this.showNav=false
				let e = this.noticeList[0]
				// // console.log(e);
				// return
					this.setBulletin('')
					// // // console.log(e) 没有title content time 是不会显示出来的
					this.setBulletin(e);
					uni.navigateTo({
						url:'/pages/index/detail'
					})
				},
			coinbt(){
				this.showPopule = true;
				return
				uni.navigateTo({
					url:'./coin'
				})
			},
			getQz(index){
				this.showNav=false
				if(index==1){
					uni.reLaunch({
						url:'/pages/mine/mine'
					})
					return
				}else if(index==2){
					uni.reLaunch({
						url:'/pages/income/income'
					})
					return
				}else if(index==4){
					console.log(111);
					uni.reLaunch({
						url:'/pages/team/team'
					})
					return
				}else if(index==5){
					uni.reLaunch({
						url:'/pages/wealth-treasure/wealth-treasure'
					})
					return
				}else if(index==6){
					////  兑换
					if(this.exchange_url){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							plus.runtime.openURL(this.exchange_url);
						}, 500)	
						// #endif
						// #ifdef H5 
						window.location.href=this.exchange_url
						// #endif
					}
					return
				}else if(index==24){
					////  抢单
					if(this.grab_url){
						// #ifdef APP-PLUS
						setTimeout(()=>{
							plus.runtime.openURL(this.grab_url);
						}, 500)	
						// #endif
						// #ifdef H5 
						window.location.href=this.grab_url
						// #endif
					}
					return
				}else if(index==3){
					if(this.isBind)return
					this.showPopuleAver =true;
					return
				}else if(index==89){
					uni.reLaunch({
						url:"/pages/new/notice"
					})
					return
				}
				uni.reLaunch({
					url:'/pages/Polymeric/index'
				})
				// if(this.indexInfo.bps){
				// 	// #ifdef APP-PLUS
				// 	setTimeout(()=>{
				// 		plus.runtime.openURL(this.indexInfo.bps);
				// 	}, 500)	
				// 	// #endif
				// 	// #ifdef H5 
				// 	window.location.href=this.indexInfo.bps
				// 	// #endif
				// }
			},
			getUser(){
				
				fetch('/api/wallet/index_data',{address:this.address,ppp:this.password},'post').then(res=>{
					if(res.data.code==1){
							if(res.data.data.refer){
								this.setIsBind(true)
							}else{
								this.setIsBind(false)
								if(this.invitation){
									this.getRefer()
								}
							}
							
						// this.indexInfo = res.data.data
						let info = res.data.data;
						info.address=this.address
						this.address_l = this.phoneNumShow(this.address)
						this.address_ = info.zc_address
						this.setLoginInfo(info)
						// this.indexInfo.balance = parseInt(Number(this.indexInfo.balance)*100000000)/100000000
						// this.indexInfo.freeze = parseInt(Number(this.indexInfo.freeze)*100000000)/100000000
						// this.indexInfo.jrxz = parseInt(Number(this.indexInfo.jrxz)*100000000)/100000000
						
	// this.clist = [{
	// 			value:this.indexInfo.jt || 0,
	// 			title:'静态流通量'
	// 		},{
	// 			value:this.indexInfo.dt || 0,
	// 			title:'动态流通量'
	// 		},{
	// 			value:this.indexInfo.gk || 0,
	// 			title:'国库流通量'
	// 		},{
	// 			value:this.indexInfo.fomo || 0,
	// 			title:'FOMO奖池'
	// 		}]
			// console.log(this.clist,'this.clist');
				
						
						this.$nextTick(()=>{
							this.isBind = true;
							
							
							
						})
					}else{
						this.isBind = false;
						this.setIsBind(false)
						if(this.invitation){
							this.getRefer()
						}else{
							this.showPopuleAver =true;
						}
						// if(this.isBind)return
						
					}
				})
			},
			getBanner(){
				fetch('/api/wallet/lun',{},'post').then(res=>{
					if(res.data.code==1){
						this.bannerList = res.data.data
						this.bannerList.forEach((item,index)=>{
							this.bannerList[index].image = this.getRequestUrl+'/uploads/'+item.img
						})
					}
				})
			},
			getNotice(){
				fetch('/api/wallet/notice',{},'post')
					.then(res=>{
						if(res.data.code==1){
							let list = res.data.data;
							
							this.noticeList = [];
							// list.forEach(item => {
							// 	item.time = diff_txt(item.time, this.i18n.today, this.i18n.yesterday, this.i18n.b_yesterday);
							// })
							this.noticeList = list;
							// // console.log(list);
							this.noticeList.forEach(item=>{
								item.content = item.content
								  .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
								  .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
								  .replace(/<p>/ig, '<p class="p_class">')
								  .replace(/\<img/gi, '<img style="max-width:98%;height:auto" ')
								
							})
							
							if(this.noticeList.length>0){
								this.noticeInfo = this.noticeList[0]
								// // console.log(this.noticeInfo);
								this.showNotice=true;
							}
							
						}
					})
					.catch(err=>{
						
					})
			},
		}
	}
</script>

<style lang="scss" spoced>
	
	.bottom-content{
		padding: 0 0 48rpx;
		text-align: center;
		color: $white;
		font-size: 28rpx;
	}
	.about-title{
		color: $white;
		font-size: 30rpx;
		text-align: center;
		position: relative;
		line-height: 114rpx;
		font-weight: bold;
		&::before{
			position: absolute;
			content: "";
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #F5C249, #7B6125);
			width: 46rpx;
			height: 6rpx;
			left: 50%;
			transform: translateX(-50%);
			bottom: 26rpx;
		}
	}
	.about-content{
		font-size: 28rpx;
		color: $white;
		padding: 28rpx;
		line-height: 52rpx;
		padding-bottom: 124rpx;
		view{
			text-indent: 20rpx;
			line-height: 40rpx;
		}
	}
	.nav-index-content{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		.nav-item-i{
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image{
				width: 84rpx;
				height: 84rpx;
				
			}
			text{
				font-size: 28rpx;
				color: #A7AEBE;
				margin: 18rpx 0 48rpx;
			}
		}
	}
	.banner{
		padding: 46rpx 54rpx 50rpx;
	}
	.income-content{
		display: flex;
		align-items: center;
		// padding-top: 120rpx;
		.income-content-l{
			width: 284rpx;
			.charts-box{
			  width:300rpx;
			  // height:300px;
			  // margin-left: -80rpx;
			}
			// image{
			// 	width: 284rpx;
			// 	height: 268rpx;
			// 	margin-bottom: 32rpx;
			// }
			view{
				margin-top: -70rpx;
				font-size: 26rpx;
				color: #596073;
				text-align: center;
			}
		}
		.income-conten-r{
			
			display: flex;
			align-items: center;
			flex-direction: column;
			.income-conten-r-l{
				padding-left: 108rpx;
				font-size: 30rpx;
				color: #191B27;
				padding-bottom: 30rpx;
				position: relative;
				&::after{
					position: absolute;
					left: 82rpx;
					top: 4rpx;
					// transform:;
					width: 12rpx;
					content: "";
					height: 12rpx;
					border-radius: 6rpx;
					background: #2952F5;
				}
				&:nth-child(1){
					&::after{
						background: #2952F5;
					}
				}
				&:nth-child(2){
					&::after{
						background: #0FCE8B;
					}
				}
				&:nth-child(3){
					&::after{
						background: #EA5745;
					}
				}
				
			}
			button{
				margin: 0 0 0 auto;
				width: 174rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: $white;
				text-align: center;
				position: relative;
				background: transparent;
				font-size: 24rpx;
				border: none;
				overflow: inherit;
				text{
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					z-index: 2;
					width: 130rpx;
					display: block;
				}
				&::after{
					display: none;
				}
				image{
					width: 240rpx;
					height:90rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					// z-index: -1;
				}
			}
		}
	}
	.popule-loading{
		width: 300rpx;
		height: 200rpx;
		border-radius: 20rpx;
		// padding: 150rpx 0;
		background: $black;
		opacity: 0.9;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.popu-buy{
		background: #1E1F2C;
		border-radius: 40rpx;
		color: $white;
		width:500rpx;
		&.popu-buy-other{
			width:600rpx;
			position: relative;
			.popule-close{
				position: absolute;
				right: 30rpx;
				top: 30rpx;
				image{
					width: 30rpx;
					height: 30rpx;
					flex-shrink: 0;
				}
			}
		}
		.popu-buy-content{
			padding: 0 30rpx;
			.popule-item{
				
				border: none;
				background: #384156;
				border-radius: 6rpx;
				padding: 0 20rpx;
				input{
					border: none;
					height: 92rpx;
					line-height: 92rpx;
					color: #fff;
				}
			}
		}
		&.popu-buy-other{
			max-height: 650rpx;
			position:relative;
		}
		.close-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			z-index:999;
		}
		.popu-buy-t{
			// line-height: 100rpx;
			margin:30rpx 0;
			border-bottom: 1rpx solid #e7eaf4;
			font-size: 30rpx;
			// font-weight: bold;
			text-align: center;
			padding: 50rpx 100rpx 0;
			word-wrap:break-word;
		}
		.popu-buy-ti{
			padding: 50rpx 0 0;
			margin:30rpx 0;
			// border-bottom: 1rpx solid #e7eaf4;
			font-size: 30rpx;
			// font-weight: bold;
			text-align: center;
		}
		.popu-buy-p{
			padding: 30rpx 40rpx;
			.p{
				word-wrap:break-word;
				width: 500rpx;
				font-size: 28rpx;
			}
		}
		.popu-buy-c{
			font-size: 26rpx;
			line-height: 40rpx;
		}
		.popu-buy-b{
			word-wrap:wrap;
			padding: 54rpx 32rpx 60rpx;
			display: flex;
			align-items: center;
			
			button{
				flex: 1;
				border-radius: 8rpx;
				color: #666;
				line-height: 108rpx;
				height: 108rpx;
				font-size: 28rpx;
				background: #f3f5f6;
				&:first-of-type{
					margin-right: 40rpx;
					color: #666;
				}
				&:last-of-type{
					color: #fff;
					background: #F5C249;
				}
			}
			&.popu-buy-b-other{
				button{
					&:first-of-type{
						margin-right: 0;
						// color: #666;
					}
				}
				
			}
		}
	}
	// .content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: center;
	// }
	.nav-conte{
		width: 530rpx;
		padding: 150rpx 30rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// align-items: center;
		background: #21242D;
		.nav-log{
			// border: 1rpx solid #fff;
			margin-bottom: 56rpx;
			display: flex;
			align-items: center;
			// justify-content: center;
			image{
				width: 105rpx;
				height: 104rpx;
				border-radius: 50rpx;
			}
		}
		.nav-address{
			font-size: 28rpx;
			color: #777D8A;
			margin-bottom: 82rpx;
		}
		.nav-item{
			&.active{
				color: #F5C249;
				i{
					color:#F5C249;
				}
			}
			// width: 400rpx;
			// padding: 0 30rpx;
			// border-bottom: 1rpx solid #e7eaf4;
			margin-bottom: 2rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// padding: 0 60rpx;
			margin-bottom: 48rpx;
			.nav-item-l{
				display: flex;
				align-items: center;
				line-height: 48rpx;
				font-size: 28rpx;
				font-weight:100;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 22rpx;
				}
			}
			
		}
	}
	.menu{
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		image{
			width: 40rpx;
			height: 30rpx;
		}
	}
	.menu-right{
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #A7AEBE;
	}
	.index-tip{
		display: flex;
		align-items: center;
		justify-content: center;
		background: $white;
		padding: 20rpx 0;
		margin-bottom: 20rpx;
		.index-tip-content{
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f3f5f6;
			color: #666;
			view{
				font-size: 28rpx;
			}
			text{
				font-size: 28rpx;
				color: #928c47;
				display: block;
				margin-left: 15rpx;
			}
		}
	}
	.index-address-bg{
		margin: 80rpx 48rpx;
		border-radius: 20rpx;
		background: linear-gradient(to bottom, rgba($color: #21242D, $alpha: 1), rgba($color: #241D0E, $alpha: .77));
	}
	.index-address{
		display: flex;
		align-items: center;
		justify-content: center;
		// background: $white;
		padding: 20rpx 0;
		margin-bottom: 32rpx;
		&.index-address-other{
			// border-bottom: 1rpx solid #2E353E;
		}
		.index-address-content{
			display: flex;
			// align-items: center;
			justify-content: center;
			flex-direction: column;
			// background: #f3f5f6;
			color: #666;
			padding: 0 40rpx;
			.index-address-content-t{
				font-size: 28rpx;
				// width: 150rpx;
				color: #F4C154;
				margin-bottom: 18rpx;
				line-height: 34rpx;
			}
			.index-address-content-r{
				
				display: flex;
				// align-items: center;
				justify-content: space-between;
				width: 600rpx;
				view{
					flex: 1;
					font-size: 28rpx;
					color: $white;
					display: block;
					// margin-left: 15rpx;
					// width: 300rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					line-height: 68rpx;
				}
				
				button{
					background: transparent;
					padding: 0;
					width: 70rpx;
					height: 68rpx;
					color: #F5C249;
					line-height: 68rpx;
					font-size: 28rpx;
					text-align: right;
				}
			}
		}
	}
	.index-card{
		// background: $white;
		padding: 15rpx 40rpx;
		margin-top: 20rpx;
		color: #666;
		position: relative;
		.index-card-btn{
			position: absolute;
			right: 60rpx;
			bottom: 30rpx;
			text-align: center;
			button{
				margin: 0;
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #334bf3;
				border-radius: 8rpx;
				color: #fff;
				font-size: 28rpx;
				&.othe-class{
					opacity: .95;
					transform: scale(.95);
				}
			}
		}
		.index-card-top{
			display: flex;
			align-items: center;
			.index-card-top-r{
				flex: 1;
				padding-left: 20rpx;
				.index-card-top-r-i{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30rx;
					text{
						display: block;
						line-height: 80rpx;
					}
				}
			}
		}
		.index-card-center{
			width: 690rpx;
			border: 1rpx solid #334bf3;
			border-radius: 20rpx;
			padding: 0 30rpx;
			margin-top: 30rpx;
			.index-card-center-l{
				width: 80rpx;
			}
			.index-card-center-title{
				width: 630rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				&::after{
					position: absolute;
					width: 620rpx;
					height: 2rpx;
					background: #334bf3;
					content: "";
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
				}
				view{
					line-height: 100rpx;
				}
			}
			.index-card-center-b{
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;				//溢出内容隐藏
				text-overflow: ellipsis;		//文本溢出部分用省略号表示
				display: -webkit-box;			//特别显示模式
				-webkit-line-clamp: 4;			//行数
				line-clamp: 4;					
				-webkit-box-orient: vertical;	//盒子中内容竖直排列
				flex: 1;
				&.other-class{
					-webkit-line-clamp: 10004;			//行数
					line-clamp: 10004;	
				}
				text{
					color: #6c6c6c;
					font-size: 28rpx;
					display: block;
					line-height: 50rpx;
					// text-indent: 2rem;
				}
			}
		}
		.index-card-title{
			display: flex;
			// align-items: center;
			.index-card-title-l{
				position: relative;
				margin-bottom: 24rpx;
				&::before{
					content: "";
					position: absolute;
					width: 234rpx;
					height: 38rpx;
					background: linear-gradient(to right, rgba($color: #F5C249, $alpha: .4),rgba($color: #F5C249, $alpha: 0), rgba($color: #F5C249, $alpha: 0));
					left: 0;
					top: 0;
					bottom: 0;
					// z-index: -1;
				}
				image{
					width: 8rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}
			}
			text{
				font-size: 28rpx;
				// font-weight: bold;
				margin-top: 4rpx;
				color: #F4C154;
			}
		}
		.icon-shangyi{
			color:#6c6c6c;
		}
		.index-card-cont-ccccc{
			position: relative;
			width: 670rpx;
			height: 336rpx;
			image{
				width: 670rpx;
				height: 336rpx;
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
			}
		}
		
		.index-card-cont{
			// background: #f3f5f6;
			position: absolute;
			z-index: 4;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			padding: 40rpx;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.index-card-cont-i{
				display: flex;
				// align-items: center;
				width: 50%;
				flex-direction: column;
				font-size: 28rpx;
				text{
					color: #A7AEBE;
					display: block;
					// width: 220rpx;
					line-height: 34rpx;
					display: block;
				}
				view{
					color: $white;
					margin-top: 16rpx;
					font-size: 36rpx;
					line-height: 36rpx;
				}
			}
		}
		
	}
	
</style>
